<!DOCTYPE html>
<html>
<head lang="en">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>皮爷の箱包馆List</title>
  <link rel="icon" href="../static/images/index/py.ico">
  <link rel="stylesheet" href="../static/css/index.css">
  <link rel="stylesheet" href="../static/css/base.css">
  <link rel="stylesheet" href="../static/css/products.css">
  <script src="../static/js/init.js"></script>
</head>

<body>
  <header id="header"></header>
  <!-- banner部分-->


  <!-- -->
  <div class="store_action">
    <div class="store_action_left">
      <div class="store_action_left_content">
        <div id="plist">
          <div class="salc_top">
            搜索结果
          </div>

          <div class="salc_content">


          </div>
          <div class="pager">
              <a href="javascript:;" class="disabled" id="previous">上一页</a>
            <div id="btnBox" style="display: inline-block;"></div>
            <a href="javascript:;" class="nextPage" id="next">下一页</a>
          </div>
        </div>
      </div>


      <div class="store_action_right rt">
        <div class="store_action_right_top">
          <p><img src="../static/images/list/foodstore_icon2.png" alt="">商家公告</p>
          <div>
            <p>皮爷皮爷</p>
            <p>英明神武</p>
            <p>千秋万代</p>
            <p>一统江湖</p>
          </div>
        </div>

      </div>
    </div>
    <!--商家-->
  </div>
  <footer id="footer"></footer>

  <script src="../static/js/jquery-3.1.1.min.js"></script>
  <script src="../static/js/jquery.page.js"></script>
  <!-- <script src="../js/base.js"></script> -->
  <script src='../static/js/index.js'></script>

  <!-- <script src="../js/products.js"></script> -->
  <script src="../static/mork/search_list.js"></script>
  <script>
    $('#header').load('header.html');
    $('#footer').load('footer.html');
  </script>
  <script>
    let getQueryString = ( searchKey ) => {
      /**
       * @param  {String} searchKey  [查询Url数据的字段]
       * @return {String} searchData [查询结果]
       */
      let searchData = {};
      let urlData = window.location.href;
          urlData = urlData.split('?');          
          urlData.shift();
          urlData = urlData[0].split('&');
          urlData.forEach( ( item , i , self ) => {
            let urlDataItem = item.split('=');
            searchData[ urlDataItem[0] ] = urlDataItem[1]
          })
      return searchData[ searchKey ];
    }
    document.addEventListener('DOMContentLoaded' , () => {
      const SEARCHHOST = baseUrl;
      const SEARCHURL = SEARCHHOST + '/v1/goods/search';
      let searchData = getQueryString( 'input' );
      // reloadDom();
      /* 请求详情数据 */
      $.ajax({
        type: 'post' ,
        url: SEARCHURL,
        data: {
          q : unescape(searchData.replace(/\\/g, "%")),
        },
        success( data ){          
          if( data.code == 200 ){
            var result = data
            var base_url = data.baseurl
           //加载渲染
          if (result.result)
            console.log("pages: " + pages)
            var pages = Math.ceil(result.paginator.total / result.paginator.pagesize);
            window.localStorage.setItem('pageMax',pages);
            var html = '';
            html += '<a href="javascript:;" class="current">1</a>';
            for (var j=2;j<=pages;j++){
              html += '<a href="javascript:;" class="tcdNumber">'+j+'</a>'
            }
            console.log(html)
            $('#btnBox').html(html);

            var list = ''
            result.data.forEach(el => {
            list += '<div class="product" id="' + el.skuid +'"><a href='+"product_details.html?skuid="+el.skuid+'>'
            list += '<img src="' + base_url+el.image + '" alt="' + el.name + '"></a>'
            list += '<div class="addRemoveProduct">'
            list += '<p>'
            list += '<span class="price">￥' + el.price + '</span>'
            list += '<a href='+"product_details.html?skuid="+el.skuid+' class="title" title='+el.name+'>'+el.name+'</a></p></div></div>'
          });

            $('.salc_content').html(list)
            $('.salc_top').html('搜索结果  共'+result.data.length+'条')
          }else{
            console.error( data.msg )
          }
        },
        error( err ){
          console.log( err );
        }
      });
       class btnList{
      constructor( btnBox , previous , next ){
        /**
         * @this {Element} btnBox   [按钮父元素]
         * @this {Number}  page     [当前页]
         * @this {Array}   btnList  [当前按钮集合]
         * @this {Element} previous [上一页]
         * @this {Element} next     [下一页]
         * @this {Object}  listData [缓存请求数据]
         * @this {Numnber} index    [当前元素于btnList的下标]
         * @this {Boolean} nextFlag [判断下一页是否存在数据]
         */
        this.btnBox = btnBox;
        this.page = 1;
        this.btnList = null;
        this.previous = previous;
        this.next = next;
        this.listData = new Map();
        this.index = 0;
        this.PageMax = window.localStorage.pageMax;
        this.catalog_id = window.localStorage.catalog_id
      }
      init(){
        console.log(this.catalog_id)
        this.btnList = [].slice.call( this.btnBox.children );
        this.register();
      }
      register(){
        /* 注册点击事件 */
        this.previous.addEventListener( 'click' , ()=>{this.previousPage()} , false );
        this.next.addEventListener( 'click' , ()=>{this.nextPage()} , false );
        this.btnBox.addEventListener( 'click' , e=>{this.handleClickBtn(e)} , false );
      }
      previousPage(){
        /* 上一页处理函数 */
        if( this.page < 2 ){
          return
        }
        if( this.index < 1 ){
          this.btnList.forEach( item => {
            item.innerHTML = Number(item.innerHTML) - 1;
          })
        };
        this.page--;
        this.index--;
        if( this.index < 1 ){
          this.index = 0;
        }
        let elm = this.btnList[this.index];
        this.handleClick( elm );
      }
      nextPage(){
        /* 下一页处理函数 */
        if(this.page == this.PageMax){
            alert('已经是最后一页了！')
            return
        }
        if( this.index >= this.btnList.length-1 ){
          this.btnList.forEach( item => {
            item.innerHTML = Number(item.innerHTML) + 1;
          })
        };
        this.page++;
        this.index++;
        if( this.index > this.btnList.length - 1 ){
          this.index = this.btnList.length -1;

        }
        let elm = this.btnList[this.index];
        this.handleClick( elm );
      }
      handleClickBtn(e){
        /* btn处理函数 */
        let target = e.target;
        if( target.nodeName !== 'A' ){
          return
        }
        let index = this.btnList.indexOf( target );
        let page = target.innerHTML;
        this.page = page;
        this.index = index;
        this.handleClick( target );
      }
      handleClick( elm ){
        this.ajax();
        /* 删除btn current样式*/
        this.btnList.forEach( item => {
          item.classList.remove( 'current' );
        });
        /* 为当前点击元素 添加current */
        elm.classList.add( 'current' );
      }
      ajax(){
        $.ajax({
        type: 'post' ,
        url: SEARCHURL,
        data: {
          q : unescape(searchData.replace(/\\/g, "%")),
          page:this.page,
        },
        success( data ){
          if( data.code == 200 ){
            var result = data
            var base_url = data.base_url
           //加载渲染
          if (result.result)
            var list = ''
            result.data.forEach(el => {
            list += '<div class="product" id="' + el.skuid +'"><a href='+"product_details.html?skuid="+el.skuid+'>'
            list += '<img src="' + base_url+el.image + '" alt="' + el.name + '"></a>'
            list += '<div class="addRemoveProduct">'
            list += '<p>'
            list += '<span class="price">￥' + el.price + '</span>'
            list += '<a href='+"product_details.html?skuid="+el.skuid+' class="title" title='+el.name+'>'+el.name+'</a></p></div></div>'
          });

            $('.salc_content').html(list)
            $('.salc_top').html('搜索结果  共'+result.data.length+'条')
          }else{
            console.error( data.msg )
          }
        },
        error( err ){
          console.log( err );
        }
      });


      }
    }
    setTimeout(new btnList($('#btnBox')[0],$('#previous')[0],$('#next')[0]).init(),2000);
    });


  </script>
<script>
    //获取参数

    // $(function () }

    //   $.ajax(
    //     type: "get",
    //     url: baseUrl + "/memberapp/search",
    //     data: 
    //       connect: window.location.href.split('=')[1]
    //     },
    //     success: function (data) 
    //       var result = JSON.parse(data)
    //       console.log(result)
    //       //加载渲染
    //       if (result.result) }
    //         var list = ''
    //         result.data.forEach(el => }
    //           list += '<div class="product" data-id="' + el.goodid +
    //             '"><a href="product_details.html?typeid=' + el.typeid + '&goodid=' + el.goodid + '">'
    //           list += '<img src="' + baseUrl + '/images' + el.listimg + '" alt="' + el.title + '"></a>'
    //           list += '<div class="addRemoveProduct"><a href="product_details.html?typeid=' + el.typeid + '&goodid=' + el.goodid + '" class="title" title="' +
    //             el.title + '">' + el.title + '</a>'
    //           list += '<span class="price">￥' + el.price + '</span></div></div>'
    //         });
    //         list += '<div class="pager"></div>'
    //         $('.salc_content').html(list)
    //         console.log()
    //         $('.salc_top').html('搜索结果  共'+result.data.length+'条')
    //       }
    //     },
    //     error: function (data) }
    //       console.log(data)
    //     }
    //   })
    // })
    //加载
</script>
</body>

</html>
